<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/first-screen.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/index.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/feed.chunk.css">
    <style>
        body {
            background-color: #f4f4f4;
        }

        .lazyimg_img {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="grid_c1 more2_inner" clstag="a">
        <div>
            <ul id="feedContent0" class="more2_list clearfix" role="tabpanel" aria-labelledby="feedTab0">
                <!-- <li class="more2_item more2_item_good hover-on">
                    <span class="more2_item_gdot"></span>
                    <a class="more2_lk" href="//item.jd.com/41274326748.html" target="_blank"
                        title="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"
                        aria-label="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"
                        clstag="h|keycount|feed|01#pd_001-a">
                        <div class="lazyimg lazyimg_loaded more2_img"><img
                                src="//img13.360buyimg.com/jdcms/s300x300_jfs/t1/205807/24/10893/193527/616597b0E5ffa878b/9c55ec54e6c8877e.jpg.webp"
                                class="lazyimg_img"
                                alt="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"></div>
                        <div class="more2_info">
                            <p class="more2_info_name">探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132
                                130</p>
                            <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                                <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">489.<span
                                            class="more2_info_price_txt-decimal">00</span></span></div>
                                <div class="more2_price_plus">
                                    <div class="more2_discount">券</div>
                                </div>
                            </div>
                        </div>
                        <div class="more2_item_hover">
                            <div class="more2_item_delete" clstag="h|keycount||feed|01#pd_001-b" title="不喜欢"></div>
                            <div class="more2_item_hd" title="">
                                <div class="more2_item_btn more2_btn_find enable" clstag="h|keycount||feed|01#pd_001-c">
                                    <i class="more2_btn_icon"></i><span>找相似</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li> -->
            </ul>
            <!-- <div class="more2_loading">
                <em style="background-color: rgb(88, 88, 87);"></em>
                <em style="background-color: rgb(150, 151, 150);"></em>
                <em style="background-color: rgb(209, 210, 208);"></em>
            </div> -->
        </div>
    </div>
</body>
<script>
    // 商品的动态生成   =>  模板字符串 => 可以根据既定的模板批量生成

    // jsonp 接口 : https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=17_1475_3602_41931&source=pc-home&callback=jsonpMore2Goods&_=1636103857217

    // 参数: 
    // page 页码
    // pageSize  每页显示多少条(不能超过150)
    // callback  接收回调函数的字段名  

    // 返回数据
    // {
    //     data:[
    //         {
    //             t, 商品的名称
    //             op,原价
    //             jp,现价
    //             img, 图片地址 (https://img20.360buyimg.com/jdcms/s400x400_ 前缀)
    //         }
    //     ]
    // }

    var more2_list = document.getElementsByClassName("more2_list")[0];

    function fn(result) {
        console.log(result);
        var { data } = result;
        var html = "";
        data.forEach(function ({ t, op, jp, img }) {
            html += `<li class="more2_item more2_item_good hover-on">
                            <div class="o2_impr"></div>
                            <a class="more2_lk" href="javascript:;"
                                target="_blank" title="${t}" aria-label="${t}"
                                clstag="h|keycount|feed|01#pd_049-a">
                                <div class="mod_lazyload_placeholder" style="height: 220px;">
                                    <img
                                        src="https://img20.360buyimg.com/jdcms/s400x400_${img}"
                                        class="lazyimg_img"
                                        alt="${t}">
                                </div>
                                <div class="more2_info">
                                    <p class="more2_info_name"><i class="more2_info_self">自营</i>${t}</p>
                                    <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                                        <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">${String(jp).split(".")[0]}.<span
                                                    class="more2_info_price_txt-decimal">${String(jp).split(".")[1]}</span></span></div>
                                    </div>
                                </div>
                                <div class="more2_item_hover">
                                    <div class="more2_item_delete" clstag="h|keycount||feed|01#pd_049-b" title="不喜欢"></div>
                                    <div class="more2_item_hd" title="">
                                        <div class="more2_item_btn more2_btn_find enable" clstag="h|keycount||feed|01#pd_049-c">
                                            <i class="more2_btn_icon"></i><span>找相似</span></div>
                                    </div>
                                </div>
                            </a>
                        </li>`
        })

        more2_list.innerHTML = html; //生成
    }









</script>
<!-- jd的后端接口  => jsonp形式的数据 => 解析 => 函数调用-->
<script
    src="https://floor.jd.com/user-v20/feed/get?page=1&pagesize=100&area=17_1475_3602_41931&source=pc-home&callback=fn&_=1636103857217"></script>

</html>